import React from 'react';
import {
  StyleSheet, Text, View, ScrollView, ListView, Image, TouchableHighlight,
  TextInput, Modal, Dimensions, ActivityIndicator
} from 'react-native'

//第三方组件
import Icon from 'react-native-vector-icons/Ionicons'
import Video from 'react-native-video'  //默认导出

//自定义组件
import _styles from '../common/styles'
import Header from '../common/header'
import Comments from './comments'

let width = Dimensions.get('window').width; //获取屏幕的宽度

const Detail = React.createClass({
  getInitialState() {
    let data = this.props.data;  //列表页传入的数据
    return {
      data: data,
      rate: 1,
      resizeMode: 'contain',
      viewLoaded: false,  //视频是否已经加载完毕，处理可播放状态
      playProgress: 0.01,  //播放进度
      viewTotalTime: 0,  //初始化视频总时长为0
      currentTime: 0,  //初始化视频当前播放的时长为0
      playing: false,  //是否正在播放
      paused: false,  //是否暂停
      viewOK: true  //视频是否可正常播放
    }
  },

  //视频开始加载
  _loadStart(){
    console.log('视频开始加载')
  },

  //视频加载时
  _videoLoad(){
    console.log('视频加载完成')
  },

  //视频在进行播放时，每250ms调用一次该事件
  _videoProjess(data){
    if (!this.state.viewLoaded) {
      this.setState({viewLoaded: true});
    }

    //计算进度
    let duration = data.playableDuration;  //视频总时长，=0表示已播放完成
    if (duration > 0) {
      let currentTime = data.currentTime;  //当前时间
      let percent = Number((currentTime / duration).toFixed(2));
      this.setState({
        playProgress: percent,
        currentTime: Number(currentTime.toFixed(2)),
        viewTotalTime: duration
      });

      if (!this.state.playing) {
        this.setState({playing: true});
        console.log('视频开始播放')
      }
    }
  },

  //视频播放完成
  _videoEnd(){
    this.setState({
      playProgress: 1,
      playing: false
    });
    console.log('视频播放完成');
  },

  //视频加载出错
  _videoError(err){
    if (this.state.viewOK) {
      this.setState({viewOK: false});
    }
    console.log(err);
    console.log('视频加载出错')
  },

  //重新播放视频
  _rePlay(){
    this.refs.videoPlayer.seek(0);
  },

  //暂停/恢复视频
  _paused(){
    this.setState({paused: !this.state.paused});
  },

  render() {
    let data = this.props.data;
    return (
      <View style={_styles.container}>
        <Header title="详情页面" navigator={this.props.navigator} bgColor="#fff" color="#000" isBack={true}/>
        <View style={styles.videoBox}>
          <Video
            ref='videoPlayer'
            source={{uri: data.video}} //视频地址
            style={styles.video}
            rate={this.state.rate}  //0=暂停, 1=播放
            volume={2.0}  //声音放大的倍数
            muted={false} //是否静音乐，true为静音
            paused={this.state.paused}  // 是否暂停，false即打开页面自动播放
            resizeMode={this.state.resizeMode}  //视频在容器中的拉伸方式
            epeat={false} // 是否重复播放

            onLoadStart={this._loadStart} //视频开始加载
            onLoad={this._videoLoad}  //视频加载时
            onProgress={this._videoProjess}  //视频在进行播放时，每250ms调用一次该事件
            onEnd={this._videoEnd}  //视频播放完成
            onError={this._videoError}  //视频加载失败
          />
          { //视频加载中时，显示加载图标
            !this.state.viewLoaded && <ActivityIndicator color='#ee735c' style={styles.loading}/>
          }
          { //视频加载出错，显示文字
            !this.state.viewOK && <Text style={styles.failText}>视频出错了，很抱歉！</Text>
          }
          { //加载完成，但不是在播放状态，显示播放按钮
            this.state.viewLoaded && !this.state.playing ?
              <Icon name="ios-play" size={40} style={styles.playIcon} onPress={this._rePlay}/> : null
          }
          { //点击视频区，暂停并出现播放图标，再点击图标继续播放
            this.state.viewLoaded && this.state.playing ?
              <TouchableHighlight onPress={this._paused} style={styles.pausedBox}>
                {
                  this.state.paused ?
                    <Icon name="ios-play" size={40} style={styles.playIcon}/> : <Text></Text>
                }
              </TouchableHighlight>
              : null
          }
          <View style={styles.progressBox}>
            <View style={[styles.progressBar,{width: width * this.state.playProgress}]}/>
          </View>
        </View>
        <Comments data={data}/>
      </View>
    )
  }
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },

  /*视频区域样式*/
  videoBox: {
    width: width,
    height: width * 0.56 + 2, //2是进度条的高度
    backgroundColor: 'red'
  },
  video: {
    width: width,
    height: width * 0.56,
    backgroundColor: '#000'
  },

  /*视频加载中*/
  loading: {
    position: 'absolute',
    left: 0,
    width: width,
    height: 80,
    alignSelf: 'center',
    backgroundColor: 'transparent'
  },
  failText: {
    position: 'absolute',
    width: width,
    top: 90,
    height: 140,
    textAlign: 'center',
    color: '#fff',
    backgroundColor: 'transparent'
  },

  /*视频播放进度条*/
  progressBox: {
    backgroundColor: '#ccc',
    width: width,
    height: 2
  },
  progressBar: {
    backgroundColor: '#ff6600',
    width: 1,
    height: 2
  },

  /*视频播放按钮*/
  playIcon: {
    position: 'absolute',
    top: 90,
    left: width / 2 - 30,
    width: 60,
    height: 60,
    paddingLeft: 22,
    paddingTop: 10,
    backgroundColor: 'transparent',
    borderColor: '#fff',
    borderWidth: 1,
    borderRadius: 30,
    color: '#ed7b66'
  },

  /*暂停透明层*/
  pausedBox: {
    width: width,
    height: width * 0.56,
    position: 'absolute',
    top: 0,
    left: 0
  },

});

module.exports = Detail;